<template>
	<div style="margin-bottom: 70px;">
		<div>
			<!-- 搜索栏 -->
			<div>
				<van-search v-model="searchValue" show-action placeholder="想找什么车" @search="onSearch" background="#4fc08d">
					<template #action>
						<div @click="onSearch">搜索</div>
					</template>
				</van-search>
			</div>
			<div>
				<!-- 筛选汽车 -->
				<van-dropdown-menu style="height: 40px;">
					<van-dropdown-item v-model="value1" :options="option1" />
					<van-dropdown-item v-model="value2" :options="option2" />
					<van-dropdown-item v-model="value3" :options="option3" />
					<van-dropdown-item v-model="value4" :options="option4" />
				</van-dropdown-menu>
				<!-- 汽车列表 -->
				<div>
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="0">
						<div class="car-list" v-for="(car,index) in cars" v-bind:key="index" style="display: flex; flex-direction: column;">
							<div style="display: flex; flex-direction: row;" @click="onCarDetail(car.carId)">
								<div>
									<van-image width="160px" height="100px" fit="contain" v-bind:src="car.titleImg" />
								</div>
								<div style="display: flex; flex-direction: column; justify-content: space-between">
									<p class="car-list-title">{{car.brand}} {{car.series}} {{car.years}} {{car.gearBox}} {{car.engine}}
										{{car.edition}}</p>
									<p class="car-list-info">{{car.licensingTime}}/{{car.tableMileage}}</p>
									<p class="car-list-price">{{car.totalPrice}} {{car.downPayment}}</p>
								</div>
							</div>
						</div>
					</van-list>
				</div>

			</div>
		</div>
		<CarTabbar :active="tabbarName"></CarTabbar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				offset: 0,
				loading: false,
				finished: false,
				tabbarName: "car",
				searchValue: '',
				cars: [],
				value1: 0,
				value2: 10,
				value3: 20,
				value4: 30,
				option1: [{
						text: '默认排序',
						value: 0
					},
					{
						text: '最新上架',
						value: 1
					},
					{
						text: '价格最低',
						value: 2
					},
					{
						text: '价格最高',
						value: 3
					},
					{
						text: '车龄最短',
						value: 4
					},
					{
						text: '里程最少',
						value: 5
					}
				],
				option2: [{
					text: '品牌',
					value: 10
				}],
				option3: [{
						text: '价格',
						value: 20
					},
					{
						text: '不限',
						value: 21
					},
					{
						text: '3万以下',
						value: 22
					},
					{
						text: '3-5万',
						value: 23
					},
					{
						text: '5-7万',
						value: 24
					},
					{
						text: '7-9万',
						value: 25
					},
					{
						text: '9-12万',
						value: 26
					},
					{
						text: '12-16万',
						value: 27
					},
					{
						text: '19-20万',
						value: 28
					},
					{
						text: '20万以上',
						value: 29
					}
				],
				option4: [{
					text: '筛选',
					value: 30
				}]
			}
		},
		methods: {
			onSearch() {
				console.log("搜索..." + this.value)
			},
			onCarDetail(carId) {
				this.$router.push({
					path: "/car/cardetail",
					query: {
						carId: carId
					}
				})
			},
			onLoad() {
				// 异步更新数据
				window.setTimeout(() => {
					this.$axios({
						method: 'post',
						url: '/car/findAllCar',
						data: this.$qs.stringify({
							offset: this.offset,
							limit: 5
						})
					}).then((resp) => {
						if (resp.data.status == 200) {
							let carsData = resp.data.obj;

							for (let i = 0; i < carsData.length; i++) {
								this.cars.push(carsData[i])
							}
							this.offset = this.offset + 5;
							this.loading = false;
							if (resp.data.obj.length == 0) {
								this.finished = true;
							}
						} else {
							Notify({
								type: 'danger',
								message: '获取车辆失败'
							})
							this.$router.back()
						}
					})
				}, 200)

			}
		}
	}
</script>

<style scoped>
	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 10px 0px;
	}
</style>
